<template>
  <van-popup v-model:show="state.isShow" class="popup-box" style="height: 100%" position="right">
    <div class="page" @click.stop>
      <global-header title="修改密码" @back="state.isShow = false" />
      <div class="page-main edit-password-main !overflow-hidden relative">
        <div class="absolute top-0 left-0 page !bg-transparent">
          <div class="page-main mx-[15px] rounded-[10px] mb-[15px] mt-[10px]">
            <div class="rounded-[10px] !bg-[#fff] overflow-hidden pt-[10px] pb-[20px] mb-[20px]">
              <div class="border-bottom mx-[15px]">
                <van-field
                  required
                  label-align="top"
                  label="旧密码"
                  :type="showPass.old ? 'text' : 'password'"
                  :maxlength="16"
                  autocomplete="off"
                  v-model="form.OldPassword"
                  placeholder="旧密码"
                  @click-right-icon="showPass.old = !showPass.old"
                >
                  <template #right-icon>
                    <div class="h-full flex items-center px-[4px]">
                      <svg-icon :name="showPass.old ? 'pass-show' : 'pass-hidden'"></svg-icon>
                    </div>
                  </template>
                </van-field>
              </div>
              <div class="border-bottom mx-[15px]">
                <van-field
                  required
                  label-align="top"
                  label="新密码"
                  :type="showPass.new ? 'text' : 'password'"
                  :maxlength="16"
                  autocomplete="off"
                  v-model="form.NewPassword"
                  placeholder="新密码"
                  @click-right-icon="showPass.new = !showPass.new"
                >
                  <template #right-icon>
                    <div class="h-full flex items-center px-[4px]">
                      <svg-icon :name="showPass.new ? 'pass-show' : 'pass-hidden'"></svg-icon>
                    </div>
                  </template>
                </van-field>
              </div>
              <div class="border-bottom mx-[15px]">
                <van-field
                  required
                  label-align="top"
                  label="确认新密码"
                  :type="showPass.confirm ? 'text' : 'password'"
                  :maxlength="16"
                  autocomplete="off"
                  v-model="form.ConfirmPassword"
                  placeholder="确认新密码"
                  @click-right-icon="showPass.confirm = !showPass.confirm"
                >
                  <template #right-icon>
                    <div class="h-full flex items-center px-[4px]">
                      <svg-icon :name="showPass.confirm ? 'pass-show' : 'pass-hidden'"></svg-icon>
                    </div>
                  </template>
                </van-field>
              </div>
            </div>
            <div>
              <van-button block type="primary" :disabled="disabled" @click="handleClick">
                确认修改
              </van-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>
<script setup lang="ts">
import { toast } from "@/utils/toast";
import { debounce } from "lodash-es";
import { reqPasswordEdit } from "@/api/main";
import { useUserStore } from "@/store/modules/user";

const emit = defineEmits(["update"]);

const userStore = useUserStore();
const state = reactive({
  isShow: false,
  updating: false
});

const form = reactive({
  OldPassword: "",
  NewPassword: "",
  ConfirmPassword: ""
});
const showPass = reactive({
  old: false,
  new: false,
  confirm: false
});
// 输入正则
const disabled = computed(() => {
  if (form.OldPassword && form.NewPassword && form.ConfirmPassword) {
    return false;
  } else {
    return true;
  }
});
const closed = () => {
  form.OldPassword = "";
  form.NewPassword = "";
  form.ConfirmPassword = "";
  state.isShow = false;
};
const open = () => {
  state.isShow = true;
};

const handleClick = debounce(
  async () => {
    if (!form.OldPassword) {
      toast.info("请输入旧密码");
      return false;
    }
    if (!form.NewPassword) {
      toast.info("请输入新密码");
      return false;
    }
    if (form.ConfirmPassword != form.NewPassword) {
      toast.info("确认密码不正确");
      return false;
    }
    state.updating = true;
    try {
      await reqPasswordEdit({
        ...form
      });
      state.updating = false;
      emit("update");
      toast.success("修改密码成功");
      closed();
      setTimeout(() => {
        userStore.logout();
      }, 200);
    } catch (error) {
      state.updating = false;
      console.log(error);
    }
  },
  500,
  { leading: true, trailing: false }
);

defineExpose({
  open
});
</script>
<style lang="scss" scoped>
:deep() {
  .van-field {
    padding: 10px 0;
    :deep(.van-field__control) {
      font-size: 14px;
    }
  }
  .edit-password-main {
    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 40px;
      z-index: 0;
      background-image: linear-gradient(to left, #33d8e6, #5f90d4);
    }
  }
}
</style>
